<!DOCTYPE html>
<html dir="ltr" lang="en-US">

	<head>
		<meta charset="UTF-8" />
		<title>
			A date range picker for Bootstrap
		</title>
		<link href="http://libs.useso.com/js/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" media="all" href="daterangepicker-bs3.css" />
		<script type="text/javascript" src="jquery.min.js">
		</script>
		<script type="text/javascript" src="bootstrap.min.js">
		</script>
		<script type="text/javascript" src="moment.js">
		</script>
		<script type="text/javascript" src="daterangepicker.js">
		</script>
	</head>

	<body>
		<div class="container">
			<div class="span12">

				<h1>Usage Examples</h1>

				<hr />

				<h4>Basic Date Range Picker</h4>
				<div class="well">

					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<div class="controls">
									<div class="input-prepend input-group">
										<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly="readonly" style="width: 200px" name="reservation" id="reservation" class="form-control" value="2014-5-21 - 2014-6-21"
										/>
									</div>
								</div>
							</div>
						</fieldset>
					</form>

					<script type="text/javascript">
						$(document).ready(function() {
									$('#reservation').daterangepicker({
											timePicker: true,
											startDate: moment().subtract('days', 7),
											endDate: moment(),
											opens: 'left',
											ranges: {
												'Today': [moment(), moment()],
												'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
												'Last 7 Days': [moment().subtract('days', 6), moment()],
												'Last 30 Days': [moment().subtract('days', 29), moment()],
												'This Month': [moment().startOf('month'), moment().endOf('month')],
												'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
											},
											function(start, end, label) {
												console.log(start.toISOString(), end.toISOString(), label);
											});
									});
					</script>

				</div>

				<h4>Basic Single Date Picker</h4>
				<div class="well">

					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<div class="controls">
									<div class="input-prepend input-group">
										<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span><input type="text" readonly="readonly" style="width: 200px" name="birthday" id="birthday" class="form-control" value="03/18/2013" />
									</div>
								</div>
							</div>
						</fieldset>
					</form>

					<script type="text/javascript">
						$(document).ready(function() {
							$('#birthday').daterangepicker({
								singleDatePicker: true
							}, function(start, end, label) {
								console.log(start.toISOString(), end.toISOString(), label);
							});
						});
					</script>

				</div>

				<h4>Date Range &amp; Time Picker with 30 Minute Increments</h4>
				<div class="well">

					<form class="form-horizontal">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="reservationtime">Choose your check-in and check-out times:</label>
								<div class="controls">
									<div class="input-prepend input-group">
										<span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
										<input type="text" style="width: 400px" name="reservation" id="reservationtime" class="form-control" value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM" class="span4" />
									</div>
								</div>
							</div>
						</fieldset>
					</form>

					<script type="text/javascript">
						$(document).ready(function() {
							$('#reservationtime').daterangepicker({
								timePicker: true,
								timePickerIncrement: 30,
								format: 'MM/DD/YYYY h:mm A'
							}, function(start, end, label) {
								console.log(start.toISOString(), end.toISOString(), label);
							});
						});
					</script>

				</div>

				<h4>Options Usage</h4>

				<div class="well" style="overflow: auto">

					<button id="options1" class="btn btn-primary">Apply Option Set 1</button>

					<button id="options2" class="btn btn-primary">Apply Option Set 2</button>

					<button id="destroy" class="btn btn-primary">Remove DateRangePicker</button>

					<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
						<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
						<span></span> <b class="caret"></b>
					</div>

					<script type="text/javascript">
						$(document).ready(function() {

							var cb = function(start, end, label) {
								console.log(start.toISOString(), end.toISOString(), label);
								$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
								//alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
							}

							var optionSet1 = {
								startDate: moment().subtract('days', 29),
								endDate: moment(),
								minDate: '01/01/2012',
								maxDate: '12/31/2014',
								dateLimit: {
									days: 60
								},
								showDropdowns: true,
								showWeekNumbers: true,
								timePicker: false,
								timePickerIncrement: 1,
								timePicker12Hour: true,
								ranges: {
									'Today': [moment(), moment()],
									'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
									'Last 7 Days': [moment().subtract('days', 6), moment()],
									'Last 30 Days': [moment().subtract('days', 29), moment()],
									'This Month': [moment().startOf('month'), moment().endOf('month')],
									'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
								},
								opens: 'left',
								buttonClasses: ['btn btn-default'],
								applyClass: 'btn-small btn-primary',
								cancelClass: 'btn-small',
								format: 'MM/DD/YYYY',
								separator: ' to ',
								locale: {
									applyLabel: 'Submit',
									cancelLabel: 'Clear',
									fromLabel: 'From',
									toLabel: 'To',
									customRangeLabel: 'Custom',
									daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
									monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
									firstDay: 1
								}
							};

							var optionSet2 = {
								startDate: moment().subtract('days', 7),
								endDate: moment(),
								opens: 'left',
								ranges: {
									'Today': [moment(), moment()],
									'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
									'Last 7 Days': [moment().subtract('days', 6), moment()],
									'Last 30 Days': [moment().subtract('days', 29), moment()],
									'This Month': [moment().startOf('month'), moment().endOf('month')],
									'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
								}
							};

							$('#reportrange span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

							$('#reportrange').daterangepicker(optionSet1, cb);

							$('#reportrange').on('show.daterangepicker', function() {
								console.log("show event fired");
							});
							$('#reportrange').on('hide.daterangepicker', function() {
								console.log("hide event fired");
							});
							$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
								console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
							});
							$('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
								console.log("cancel event fired");
							});

							$('#options1').click(function() {
								$('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
							});

							$('#options2').click(function() {
								$('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
							});

							$('#destroy').click(function() {
								$('#reportrange').data('daterangepicker').remove();
							});

						});
					</script>

				</div>

				<h4>Plays nicely with Bootstrap dropdowns</h4>

				<div class="well">

					<div class="dropdown" style="display: inline-block;">
						<a data-toggle="dropdown" class="btn btn-primary" href="#">Regular dropdown</a>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
							<li><a href="#">item</a></li>
						</ul>
					</div>

					<div id="reportrange2" class="btn" style="display: inline-block; background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
						<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
						<span></span> <b class="caret"></b>
					</div>

					<script type="text/javascript">
						$(document).ready(function() {
							$('#reportrange2 span').html(moment().subtract('days', 29).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
							$('#reportrange2').daterangepicker();
						});
					</script>

				</div>

			</div>
		</div>

	</body>

</html>